<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>点评</title>
    <link rel="stylesheet" type="text/css" href="/static/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/api.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css" />
    <style>

        /* 头部样式 */
        #firstHeader {background-color: #FF8400;}
        .topbar {/*background: #FF8400;*/ height:50px; border-bottom: 1px solid #DDDFE3;}
        .topbar_title {display: inline-block;font-size: 20px; line-height: 50px;padding-left: 12px;}
        .hr01, .hr02 {height: 28px;}
        .headerico {padding: 11px 15px 11px 15px;}
        .headericohover {background: #DADDE0;}
        .fr{float: right;}
        .fl{float: left;}

        /*第一头部*/
        #logo {padding: 11px 0 0 10px;height: 28px;}
        #citylist {height: 50px; line-height: 50px;padding-left: 15px; font-size: 18px; color: #fff;}
        .citylistarrow {vertical-align: top; width: 20px; padding-top: 15px;}
        .search {height: 34px;line-height: 34px; padding-left: 10px; border-radius: 30px;  margin-top: 8px; position: absolute; left: 20px; right: 60px;font-size: 14px;}
        .search img {vertical-align: top; width: 20px; padding-top: 7px;padding-right: 10px;}
        .firstSearch {left: 90px;right: 60px;background-color: #FA6604;color: #FDC29B;}

        /* 第二头部 */
        #topbar_refresh {width: 40px;padding:5px 10px;}
        .whitebar {background-color: #fcfcfc;}
        #whitecity {height: 50px; line-height: 50px;padding-left: 15px; font-size: 18px;color: #FF8400;}
        .secCitylistarrow {vertical-align: top; width: 15px; padding-top: 18px;padding-left: 5px;}
        .secSearch {left: 90px;right: 15px;background-color: #E8E8E8;color: #999;}

        /* 第三头部 */
        .swipepic {padding: 5px 15px 2px 15px;height: 23px;}
        .swipe div {font-size: 12px; text-align: center;color: #999;}
        .thrSearch {left: 15px;right: 60px;background-color: #E8E8E8;color: #999;}

        .bubble{
            margin-right:10px;
            margin-bottom:5px;
            border: 2px solid orange;
            border-radius:8px;
            padding:4px 8px 4px 8px;
        }
        /* 头部切换样式 */
        .titlebar {display: none;}
        .activebar {display: block;}

        /* 底部切换按钮样式 */
        ul {display: -webkit-box; display: -webkit-flex; display: flex; }
        #footer {height: 61px; line-height: 60px; background-color: #FAFAFA;border-top: 1px solid #FAFAFA; }
        #footer li{-webkit-box-flex: 1; -webkit-flex: 1; flex:1; height: 60px;}

        /* 选项卡样式 */
        .scrollbar {display: -webkit-box;display: -webkit-flex; text-align: center; height: 40px; line-height: 40px;background: #EBECF0;font-size: 12px;position: relative;}
        .col1 {-webkit-box-flex:1;-webkit-flex: 1;flex:1;color: #909090;}
        .indexbar {position: absolute;/*background: #0fc;*/width: 50%;height: 5px;left: 0px;bottom: 0px;-webkit-transition: 300ms;}
        .redbox {background: #DB4646;width: 40px;height: 5px;position: relative;left: auto;right: auto; margin-left: auto; margin-right: auto;}

        /********************/
        /* 底部按钮原始样式 */
        /********************/
        .bbtn01 {background: url(./image/main_index_home_normal.png) no-repeat center 4px; }
        .bbtn02 {background: url(./image/main_index_tuan_normal.png) no-repeat center 4px; }
        .bbtn03 {background: url(./image/main_index_search_normal.png) no-repeat center 4px; }
        .bbtn04 {background: url(./image/main_index_my_normal.png) no-repeat center 4px; }
        .bottom_btn {width: 99%; height: 43px;padding-top: 18px;background-position-y: 4px; background-size: 30px;  font-size: 12px; color: #A5A5A5;}

        /* 底部按钮激活样式 */
        .activebtn0 {background: url(./image/main_index_home_pressed.png) no-repeat center 4px; }
        .activebtn1 {background: url(./image/main_index_tuan_pressed.png) no-repeat center 4px; }
        .activebtn2 {background: url(./image/main_index_search_pressed.png) no-repeat center 4px; }
        .activebtn3 {background: url(./image/main_index_my_pressed.png) no-repeat center 4px; }
        .activebtn {color:#FF7419; background-size: 30px; }
        .bottomhover {background-color: #46494B;}

        /* 本地刷新图标 */
        #localrefresh {display:none;float: right; width: 40px; padding: 5px 10px;}

        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
            color: #E1E1E1;
        }
        input:-moz-placeholder, textarea:-moz-placeholder {
            color: #E1E1E1;
        }
        input::-moz-placeholder, textarea::-moz-placeholder {
            color: #E1E1E1;
        }
        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
            color: #E1E1E1;
        }

        .h80 {height: 80px;}
        .h40 {height: 40px;}
        .h20 {height: 20px;}
        .h10 {height: 10px;background: #f0f0f0;}
        .h1 {height: 1px;margin-left: 15px;background: #f0f0f0;}
        .fr {float: right;}
        .fl {float: left;}
        .hightitem {background-color: #fff;}

        /* 抢购样式 */
        .snapup {height: 80px;}
        .snapup .infologo {height: 60px; margin: 10px;}
        .snapup .shelf2 {display: table;height: inherit;margin-left: 10px;}
        .snapup .shelfcell {display: table-cell;vertical-align: middle;}
        .snapup .shelfcell .title {margin-bottom: 10px;}
        .snapup .arrow {width: 20px; padding-top: 30px;padding-right: 10px;}

        /* 2X2样式 */
        .row {display: -webkit-box;display: -webkit-flex;}
        .col {-webkit-box-flex:1; -webkit-flex:1; flex:1;position: relative;}
        .col img {position: absolute; right: 0; width: 80px; top: 0;}
        .col .matrixcell {display: table-cell;vertical-align: middle; padding-left: 10px;}
        .col .matrixcell .title {margin-bottom: 10px;}
        .matrix {display: table;height: inherit;}

        /* 猜你喜欢 */
        .guesstitle {height: auto;line-height: 20px;padding-left: 10px;vertical-align: top; font-size: 12px;color: #999;}
        .guesstitle img {height: 15px;padding-top: 12px; padding-left: 10px;}
        .home-tuan-list .item {position: relative; display: block; padding-left: 10px; border-bottom: 1px solid #e0e0e0;}
        .home-tuan-list .cnt {padding: 7px 10px 10px 0; display: box; display: -webkit-box; min-height: 78px;  background-size: auto 1px; }
        .home-tuan-list .pic {margin-right: 10px; background: center; }
        .home-tuan-list img {width: 90px; height: 66px; margin-top: 7px; margin-bottom: 5px; border-radius: 3px; }
        .home-tuan-list .wrap {-webkit-box-flex: 1; }
        .home-tuan-list .wrap2 {display: table; height: 88px; width: 100%; }
        .home-tuan-list .content {-webkit-box-flex: 1; box-flex: 1; display: table-cell; vertical-align: middle; }
        .home-tuan-list .shopname {color: #333; /*line-height: 16px;*/ font-size: 17px; max-width: 15em; white-space: nowrap; word-wrap: normal; text-overflow: ellipsis; overflow: hidden; min-height: 10px; padding-bottom: 2px; padding-top: 3px; display: inline-block;}
        .home-tuan-list .title {color: #666; line-height: 16px; font-size: 13px; max-height: 30px; overflow: hidden; padding-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .home-tuan-list .hot-title {margin-bottom: 8px; }
        .home-tuan-list .hot-subtitle {margin-bottom: 9px; }
        .home-tuan-list .info {margin-top: 9px; /*margin-bottom: 11px;*/ color: #666; font-size: 12px; position: relative; line-height: 15px; display: box; display: -webkit-box; height: 15px; }
        .home-tuan-list .symbol {font-size: 14px; color: #f60; display: block; margin-top: 1px; }
        .home-tuan-list .price {color: #f60; font-size: 20px; line-height: 15px; margin-right: 5px; margin-top: 1px; }
        .home-tuan-list .o-price {color: #999; margin-top: 5px; line-height: 10px; }
        .home-tuan-list .sale {color: #f63; border: solid 1px #ff916e; padding: 3px 2px 2px; font-size: 10px; border-radius: 2px; -webkit-border-radius: 2px; margin-left: 5px; line-height: 10px; height: 10px; }
        .home-tuan-list .distance {-webkit-box-flex: 1; box-flex: 1; -ms-box-flex: 1; -ms-flex: 1; text-align: right; line-height: 10px; margin-top: 5px; color: #999; float: right;font-size: 12px;}
        .home-tuan-list .price, .index-rec .home-tuan-list .o-price, .index-rec .home-tuan-list .distance, .index-rec .home-tuan-list .sale {display: block; line-height: 15px; font-size: 12px; }
        .Fix:after {display: block; content: ''; height: 0; clear: both; }

        /* 3. */
        .section03 .col img {width: 60px; top: 10px;}
        .section03 .title01 .title{color: #965037;}
        .section03 .title02 .title{color: #ffa001;}
        .section03 .title03 .title{color: #ff558c;}
        .section03 .title04 .title{color: #19b4ff;}
        .section03 .matrixcell .info {color: #666;}

        /* 2. */
        .section02 .shelfcell .title span{color: #ff6633;}
        .section02 .shelfcell .subtitel {color: #666;font-size: 14px;}
        .swiper-container {background-color: #fff;}

        /* 1. */
        .section01 .row {margin-top: 10px;}
        .section01 .col {text-align: center;}
        .section01 .col img {position: relative;width: 60%; }
        .section01 .col div {font-size: 13px;margin-top: 5px; }

        .presshover {background-color: #FAFAFA;}
        .brb {border-bottom: 1px solid #e0e0e0;border-right: 1px solid #e0e0e0;}
        .bb {border-bottom: 1px solid #e0e0e0;}
        .br {border-right: 1px solid #e0e0e0;}




        .swipe {
            overflow: hidden;
            visibility: hidden;
            position: relative;
            background: #fff;
            padding-bottom: 10px;
        }
        .swipe-wrap {
            overflow: hidden;
            position: relative;
        }
        .swipe-wrap .swipe-box {
            float: left;
            width: 100%;
            position: relative;
        }

        .sliderow {text-align: center;width: 100%;display: block;}
        /*.slidepanel .sliderow {margin-top: 10px;}*/
        .sliderow .slidecol {float:left;width: 25%;}
        .sliderow .slidecol img {width: 60%;margin-top: 10px;}
        .sliderow .slidecol div {font-size: 13px; margin-top: 5px;}


    </style>
</head>
<body>
<div id="wrap">

    <div id="firstHeader" class="titlebar activebar">
        <div class="topbar">
            <div class="citylist fl" id="citylist" tapmode=""><img src="./image/title_home_arrow_down_normal.png" alt=""
                                                                       class="citylistarrow"></div>
<!--            插入表单控件-->
<!--            搜索框-->
            <input type="text" class="search firstSearch" placeholder="输入门店名称" name="keyword"  id="keyword">
            <!--隐藏域：存储经纬度-->
            <input type="hidden" id="longitude">
            <input type="hidden"id="latitude">
            <span id="rightTitle" style="font-size:16px;color:white;float:right;padding-top:12px;">登录</span>
        </div>
    </div>


    <div id="main" style="padding:0px;width:100%;height:100%;border:0px;">

        <!-- 1. 头部swipe -->
        <div id='slider' class='swipe'>
            <div class='swipe-wrap'>
                <div class="swipe-box">
                    <div class="sliderow" id="slideRow1">
                    </div>
                    <div class="sliderow" id="slideRow2">
                    </div>
                </div>
            </div>
        </div>

<!--        展示数据-->
        <div class="guesstitle" id="guess">猜你喜欢</div>
<!--        门店展示的容器-->
        <div class="home-tuan-list" id="tuanList">

        </div>
<!--搜索结果展示-->
        <div class="guesstitle" id="searchTitle" style="font-size:14px;">
            <p id="resTitle" >搜索结果</p>
            <div id="extraPadding" style="display:block;">
                <p>分类过滤</p>
                <div id="categoryFilter" style="margin-bottom:10px;"></div>
                <p>排序规则</p>
                <div id="priceFilter" style="margin-bottom:10px;"></div>
                <p>标签筛选</p>
                <div id="tagsFilter" style="margin-bottom:10px;"></div>
            </div>
        </div>
        <div class="home-tuan-list" id="searchList">

        </div>


    </div>

    <div id="footer">
        <ul>
            <li tapmode="activebtn0 activebtn">
                <a class="bottom_btn bbtn01 weixin activebtn activebtn0" href="/static/index.html">首页</a>
            </li>

            <li tapmode="activebtn1 activebtn">
                <a class="bottom_btn bbtn02 communicate">团购</a>
            </li>

            <li tapmode="activebtn2 activebtn">
                <a class="bottom_btn bbtn03 discover">发现</a>
            </li>

            <li tapmode="activebtn3 activebtn">
                <a class="bottom_btn bbtn04 home">我的</a>
            </li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/script/api.js"></script>
<script type="text/javascript" src="/static/script/swipe.js"></script>
<script type="text/javascript" src="/static/script/jquery.min.js"></script>
<script type="text/javascript" src="/static/script/bootstrap.js"></script>
<!--引入百度地图的脚本-->
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=rxlAbcuDP6AqGGdzCcTnNxAlOd6wGxK0"></script>
<script type="text/javascript">
    let citylist = document.querySelector("#citylist");
    let longitudeInput = document.querySelector("#longitude");
    let latitudeInput = document.querySelector("#latitude");
    let tuanListDiv = document.querySelector("#tuanList");
    //关键字的文本框
    let keywordInput = document.querySelector("#keyword");
    //展示搜索页的容器
    let searchListDiv = document.querySelector("#searchList");
    let sliderDiv= document.querySelector("#slider");
    let guessDiv= document.querySelector("#guess");

    //分类过滤
    let categoryFilterDiv= document.querySelector("#categoryFilter");
    let tagsFilterDiv= document.querySelector("#tagsFilter");

    //绑定回车事件 (监听按键事件)
    keywordInput.addEventListener("keypress",(event)=>{
        if(event.keyCode ===13){ //13为回车键
             //执行查询
             searchFunction();
        }
    })

    //声明查询的条件
    let  g_categoryFilter=null;
    let  g_orderby=null;
    let  g_tags=null;

    let searchFunction=function(){
        let longitude = longitudeInput.value;
        let latitude = latitudeInput.value;
        let keyword = keywordInput.value;
        let regex="/^\\s*$/";
        if(regex.match(keyword)){
            alert("关键字不能为空！");
            return false;
        }

        if(regex.match(longitude) || regex.match(latitude)){
            alert("地址信息还未获取！");
            return false;
        }
        //对自定义的过滤条件进行处理
        let categoryQueryString='';
        let orderbyQueryString='';
        let tagsQueryString ='';

        if(g_tags == null){
            tagsQueryString =''
        }else{
            tagsQueryString=`&tags=${g_tags}`;
        }

        if(g_categoryFilter ==null){
            categoryQueryString='';
        }else{
            categoryQueryString=`&categoryId=${g_categoryFilter}`;
        }

        if(g_orderby == null){
            orderbyQueryString='';
        }else{
            orderbyQueryString=`&orderby=${g_orderby}`;
        }

        let url=`/shop/search?longitude=${longitude}&latitude=${latitude}&keyword=${keyword}${categoryQueryString}${orderbyQueryString}${tagsQueryString}`;
        fetch(url).then(response=>response.json()).then(data=>{
            if (!data.success) {
                return;
            }
            tuanListDiv.style.display = "none";
            sliderDiv.style.display = "none";
            guessDiv.style.display = "none";
            searchListDiv.style.display = "block";
            let dataList = data.data.list;
            searchListDiv.innerHTML='';
            for(let i=0;i<dataList.length;i++){
                let distance=dataList[i].distance;
                let distanceStr="0m";
                if(distance>=1000){
                    distanceStr=  getFloat(distance/1000,1)+"km";
                }else{
                    distanceStr=distance+"m";
                }

                let content =`<a href="" class="item Fix hightitem">
                                                    <div class="cnt">
                                                    <img class="pic" src="${dataList[i].iconUrl}"/>
                                                    <div class="wrap">
                                                    <div class="wrap2">
                                                    <div class="content">
                                                    <div class="shopname">${dataList[i].name}</div><span class="distance">${distanceStr}</span>
                                                    <div class="title">${dataList[i].tags}</div>
                                                    <div class="info">
                                                    <span class="symbol">¥</span>
                                                    <span class="price">${dataList[i].pricePerMan}</span></div> </div> </div> </div> </div></a>`;

                searchListDiv.insertAdjacentHTML("beforeend",content);
             }
            //定义分类的信息
            let categoryList= data.data.categoryList;
            let categoryTag=`<span class="bubble" data-id="${0}" onclick="appendCategory(this)" id="category${0}">全部</span>`;
            categoryFilterDiv.innerHTML='';//清楚数据
            categoryFilterDiv.insertAdjacentHTML("beforeend",categoryTag);
            for(let i=0;i<categoryList.length; i++){
                categoryTag=`<span class="bubble" data-id="${categoryList[i].id}" onclick="appendCategory(this)" id="category${categoryList[i].id}">${categoryList[i].name}</span>`;
                categoryFilterDiv.insertAdjacentHTML("beforeend",categoryTag);
            }

            //定义标签信息
            tagsFilterDiv.innerHTML='';
            let tagsList= data.data.tags;
            let tagsTag=`<span class="bubble" data-id="${0}" onclick="appendTags(this)" id="category${0}">全部</span>`;
            tagsFilterDiv.insertAdjacentHTML("beforeend",tagsTag);
            for(let i=0;i<tagsList.length; i++){
                tagsTag=`<span class="bubble" data-id="${tagsList[i].tags}" onclick="appendTags(this)" id="tags${tagsList[i].tags}">${tagsList[i].tags}(${tagsList[i].num})</span>`;
                tagsFilterDiv.insertAdjacentHTML("beforeend",tagsTag);
            }

        })
     }

     let appendTags=function(obj){
       let tags=obj.dataset.id;
       if(tags==0){
           g_tags=null;
       }else{
           g_tags=tags;
       }
         searchFunction();
     }

     //分类过滤的函数
    let appendCategory=function(obj){
        //获得data-id的值
       let id= obj.dataset.id;
       if(id==0){
           g_categoryFilter=null;
       }else{
           g_categoryFilter=id;
       }

       searchFunction();
    }


    //保留小数点指定的位数
    let getFloat = function (number, n) {
        n = n ? parseInt(n) : 0;
        if (n <= 0) return Math.round(number);
        number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n);
        return number;
    };

    jQuery(document).ready(function() {
         $("#rightTitle").on("click",function(){
                 window.location.href="/static/login.html";
         });


        let geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            console.log(r);
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                 let city=r.address.city;
                 latitudeInput.value=r.point.lat;
                 longitudeInput.value=r.point.lng;
                 citylist.innerHTML=city;
                 let url=`/shop/recommend?longitude=${r.point.lng}&latitude=${r.point.lat}`;
                 //发送异步请求
                fetch(url).then(response=>response.json()).then(data=>{
                    console.log(data);
                    if(data.success){
                        let dataList=data.data.list;
                        for(let i=0;i<dataList.length;i++){
                            let distance=dataList[i].distance;
                            let distanceStr="0m";
                            if(distance>=1000){
                                distanceStr=  getFloat(distance/1000,1)+"km";
                            }else{
                                distanceStr=distance+"m";
                            }
                            let content =`<a href="" class="item Fix hightitem">
                                                    <div class="cnt">
                                                    <img class="pic" src="${dataList[i].iconUrl}"/>
                                                    <div class="wrap">
                                                    <div class="wrap2">
                                                    <div class="content">
                                                    <div class="shopname">${dataList[i].name}</div><span class="distance">${distanceStr}</span>
                                                    <div class="title">${dataList[i].tags}</div>
                                                    <div class="info">
                                                    <span class="symbol">¥</span>
                                                    <span class="price">${dataList[i].pricePerMan}</span></div> </div> </div> </div> </div></a>`;

                            tuanListDiv.insertAdjacentHTML("beforeend",content);
                        }
                    }
                })
            }
        })

    });
    let rightTitle = document.querySelector("#rightTitle");

    // 加载页面之后，向后台发送请求，查收session中是否存在数据
    fetch('/user/getCurrentUser',{
        method : 'POST',
        headers:{
            "Content-type":"application/json;charset=utf-8"
        }
    }).then(response=>response.json()).then(data=>{
         if(data.data.user==null){
             //说明session中没有用户
             rightTitle.innerHTML="登录";
         }else{
             //将登录修改为注销
             rightTitle.innerHTML="注销";
         }
    }).catch(e=>alert("网络异常1"));

    
    
    let sliderRow1 = document.querySelector("#slideRow1");
    let sliderRow2 = document.querySelector("#slideRow2");

    //发送异步请求
    fetch(`/category/list`).then(response=>response.json()).then(data=>{
        //处理响应数据
        let dataList = data.data.list;
        for(let i=0;i<dataList.length; i++){
            let content=`<div class="slidecol">
                           <img src="${dataList[i].iconUrl}">
                           <div class="">${dataList[i].name}</div>
                         </div>`;
            //将字符串转成node节点
            let node = document.createRange().createContextualFragment(content);
            if(i<=3){
                sliderRow1.append(node);
            }else{
                sliderRow2.append(node);
            }

        }

    }).catch(e => alert(e));


    window.onload = function() {
        var slider =
            Swipe(document.getElementById('slider'), {
                auto: 1000000,
                continuous: true,
                callback: function (pos) {
                }
            });
    }




    //注销的功能
    //1. 对rightTitle绑定单击事件
    //2. 如果rightTitle的值为注销，则发送logout的请求到后台。
 
</script>
</html>